<template>
  <div id="main">
    <TopA></TopA>
    <div class="left">
      <el-menu
        :default-active="value"
        unique-opened
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        style="height: 100%">
        <!--      :route="{path: item.url, query: {value: item.title, flag: true}}"-->
        <component
          class="menu-item"
          v-for="(item, index) in menu.navList"
          :key="item.className + index"
          :index="item.className + index"
          :is="(item.childClassList && item.childClassList.length > 0)?'el-submenu': 'el-menu-item'"
        >
          <template slot="title">
            <div v-on:click="getGoodsOnSale2(item.classId,item.className)">
              <i class="el-icon-menu"></i>
              <span>{{item.className}}</span>
            </div>
          </template>
          <template v-if="item.childClassList && item.childClassList.length > 0">
            <el-menu-item class="menu-item" v-for="(v,i) in item.childClassList" :key="v.classId + '!' + i + '@'" :index="i + v.className"
                          v-on:click.native="getByChildClass(v.classId, v.className)"
            >
              <!--            :route="{path: v.url, query: {value: v.title, flag: true}}"-->
              <i class="el-icon-menu"></i>
              <span slot="title">{{v.className}}</span>
            </el-menu-item>
          </template>
        </component>
      </el-menu>
    </div>
    <div class="bread">
      <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: large">
        <el-breadcrumb-item ><span v-on:click="breadClick('首页')" style="cursor: pointer">首页</span></el-breadcrumb-item>
        <!--      <el-breadcrumb-item v-if="bread.length >= 5" v-for="(item, index) in bread.slice(bread.length-5, bread.length)" :key="item + index + '@!'"><span v-on:click="breadClick(item.tag)" style="cursor: pointer">{{item.tag}}</span></el-breadcrumb-item>-->
        <el-breadcrumb-item v-for="(item, index) in bread" :key="item + '$' + index + '@'"><span v-on:click="breadClick(item.tag)" style="cursor: pointer">{{item.tag}}</span></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="middle">
      <el-row v-for="(item, index) in pagination.list.slice((pagination.currentPage-1) * pagination.rows, pagination.currentPage * pagination.rows)" :key="'!' + index + '@'" class="adjustment-table">
        <el-col :span="6" v-for="(value, index) in item" :key="'@' + index + '!'">
          <good_custom :data="value"></good_custom>
        </el-col>
      </el-row>
      <div v-if="!pagination.list || pagination.list.length === 0">
        <el-empty image="../static/哭泣花.png"></el-empty>
      </div>
      <el-row>
        <el-col :span="22" :offset="2" :pull="2">
          <div class="adjustment-pag">
            <el-pagination
              :background="true"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              layout="prev, pager, next, jumper"
              :current-page="pagination.currentPage"
              :page-size="pagination.rows"
              :total="pagination.list.length">
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

</template>

<script>
import good_custom from "../components/good_custom";
import TopA from "../components/TopA";
export default {
  name: "home_A",
  components: {
    TopA,
    good_custom
  },
  data() {
    return {
      customName: null,
      dialogFormVisible_login: false,
      isCollapse: false,
      currentPath: this.$route.path,
      value: this.$route.query.value,
      search: "",
      goodList: [],
      pagination : {
        currentPage: 1,
        rows: 2,
        list: []
      },
      form: {
        user: '',
        account: '',
        password: ''
      },
      bread: [],
      bread_flag1: 0,
      bread_flag2: 0,
      menu: {
        navList: [{
          title: "水果",
          url: ""
        }, {
          title: "蔬菜",
          url : ""
        }, {
          title: "家电",
          url: ""
        }, {
          title: "零食",
          url: "12",
          children: [{
            title: "乐事",
            url: ""
          }, {
            title: "小老板",
            url: ""
          }]
        }]
      },
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSizeChange(val) {
      this.pagination.rows = val;
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val;
    },
    handList: function () {
      this.pagination.list = this.goodList;
    },
    addBread: function (value) {
      if (this.bread == null && value != null) {
        this.bread = [{tag: value}];
        return true;
      } else {
        for (let i = 0; i < this.bread.length; i ++) {
          if (this.bread[i].tag === value) {
            return false;
          }
        }
        if (value != null) {
          if (this.bread.length < 5) {
            this.bread.push({tag: value})
          } else {
            this.bread.push({tag: value});
            this.bread.splice(0, 1);
          }
        }
        return true;
      }
    },
    login : function () {
      this.$router.push({
        path: '/temp',
        query: {
          value: '信息处理'
        }
      })
    },
    //更改数组格式
    changeFormat: function () {
      var result = []
      for (var i = 0, len = this.goodList.length; i < len; i += 4) {
        result.push(this.goodList.slice(i, i + 4))
      }
      // alert(result[0].length)
      this.pagination.list = result;
      // alert(JSON.stringify(this.pagination.list))
    },
    //面包屑点击事件
    breadClick: function (value) {
      let tag = "首页";
      if (value !== "首页") {
        tag = value;
        this.getGoodsOnSale(tag);
        this.bread_flag2=0;
      } else {
        this.getGoodsOnSale(null);
        this.bread_flag1=0;
        this.bread_flag2=0;
      }
      this.bread.splice(0);
    },
    getGoodsOnSale: function (value) {
      const loading = this.$loading({
        lock: true,
        text: "数据加载中",
        spinner: "el-icon-loading",
        background: "rgba(255, 255, 255, 0.8)",
        target: "#main",
        customClass: "loading-customClass"
      });
      if (value == null) {
        this.$api.good.getGoodsOnSale().then(res => {
          console.log("goodList", res);
          if (res.data.data == null) {
            this.pagination.list = [];
            loading.close();
          } else {
            this.goodList = res.data.data;
            this.changeFormat();
            loading.close();
          }
          this.addBread(value);
        })
      } else {
        this.$api.good.getGoodsOnSale({
          goodName: value
        }).then(res => {
          console.log("goodList", res);
          if (res.data.code === 200) {
            this.goodList = res.data.data;
            // alert(JSON.stringify(this.goodList))
            if (this.goodList != null) {
              this.changeFormat();
              loading.close();
            } else {
              this.pagination.list = [];
              loading.close();
            }
            this.addBread(value);
          }
        })
      }
    },
    getGoodsOnSale2: function (value,name) {
      const loading = this.$loading({
        lock: true,
        text: "数据加载中",
        spinner: "el-icon-loading",
        background: "rgba(255, 255, 255, 0.8)",
        target: "#main",
        customClass: "loading-customClass"
      });
      if (value !== null) {
        this.$api.good.getByParentClass({
          classId: value
        }).then(res => {
          console.log("parent", res);
          if (res.data.data == null) {
            this.pagination.list = [];
            loading.close();
          } else {
            this.goodList = res.data.data;
            this.changeFormat();
            loading.close();
          }
          if(this.bread_flag1==0)
          {
            this.addBread(name);
            this.bread_flag1=1;
          }else{
            this.bread.splice(0);
            this.addBread(name);
            this.bread_flag2=0;
          }
        })
      }
    },
    getByChildClass: function (value, name) {
      const loading = this.$loading({
        lock: true,
        text: "数据加载中",
        spinner: "el-icon-loading",
        background: "rgba(255, 255, 255, 0.8)",
        target: "#main",
        customClass: "loading-customClass"
      });
      this.$api.good.getByChildClass({
        classId: value
      }).then(res => {
        console.log("child", res);
        if (res.data.code === 200) {
          if (res.data.data.length === 0) {
            this.pagination.list = [];
            loading.close();
          } else {
            this.goodList = res.data.data;
            this.changeFormat();
            loading.close();
          }
          if(this.bread_flag2==0)
          {
            this.addBread(name);
            this.bread_flag2=1;
          }else{
            this.bread.splice(1);
            this.addBread(name);
          }
        }
      })
    },
    getGoodsClass: function () {
      this.$api.good.getGoodsClass().then(res => {
        console.log("class", res)
        if (res.data.code === 200) {
          this.menu.navList = res.data.data;
          // alert(JSON.stringify(this.menu))
        }
      })
    },
    breadInit: function () {
      let bread = JSON.parse(sessionStorage.getItem("bread"));
      this.bread = bread;
    },
    dataInit: function () {
      this.customName = sessionStorage.getItem("username");
      this.getGoodsOnSale(this.$route.query.data);
      this.getGoodsClass();
      this.$api.user.getOrderByuser_idX({
        userId: sessionStorage.getItem("userId")
      }).then(res => {
        console.log("orderBuy", res)
      });
      this.breadInit();
    }
  },
  beforeDestroy() {
    console.log("卧槽， 我要没了");
    sessionStorage.setItem("bread", JSON.stringify(this.bread));
  },
  created() {
    // this.$http.post("http://rap2api.taobao.org/app/mock/293261/home/data").then(res => {
    //   this.goodList = res.data.goods;
    //   console.log(res)
    //   this.changeFormat();
    // });
    // alert(this.$route.query.data)
    this.dataInit();
  }
}
</script>

<style scoped>
#main {
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
  position: relative;
  overflow-x: hidden;
}
.left {
  position: fixed;
  width: 15%;
  height: 100%;
}
.left {
  position: fixed;
  width: 15%;
  height: 100%;
  top: 10%;
}
.top {
  position: fixed;
  width: 100%;
  height: 10%;
  vertical-align: middle;
  background: rgba(176, 224, 230, 1);
  z-index: 999;
}
.middle {
  position: relative;
  top: 15%;
  left: 18%;
  width: 70%;
}
.bread {
  position: absolute;
  top: 12%;
  left: 18%;
  width: 100%;
  float: left;
}
td {
  width: 250px;
  height: 300px;
}
.tb1 {
  position: relative;
  height: inherit;
  border-spacing: 40px 20px;
}

table th,
table td {
  border-bottom: none !important;
}

.el-table::before {
  height: 0px;
}
.customer-table .el-table__fixed-right::before,
.el-table__fixed::before {
  width: 0;
}
.adjustment-table {
  padding-top: 30px;
}
.adjustment-pag {
  float: right;
  padding-top: 30px;
}
/deep/ .el-button--primary.is-plain {
  color: white;
  font-size: 15px;
  background: rgba(176, 224, 230, 1);
  border-color: rgba(176, 224, 230, 1);
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: rgba(176, 224, 230, 1);
}
</style>
